<!DOCTYPE html>
<html lang="en">
<html>
	<head>
		<title>Workflow</title>
		<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
				$('.node-drag-wrapper').on('mouseenter', function(){
					$('.node-drag-wrapper').css({
						'border-color':'#cccccc'
					});
					$('.node-drag-item-wrapper').css({
						'border-color':'#cccccc'
					});
					$('span.node-drag-text-wrapper').css({
						'display':'block'
					});

					$('.node-settings-wrapper').animate({
						bottom:0,
						opacity:1
					});
					$('.node-circle-settings-wrapper').animate({
						bottom:-15,
						opacity:1
					});

					$('.node-dragtopoint-wrapper').animate({
						top:-2,
						opacity:1
					});

					$('.node-circle-dragtopoint-wrapper').animate({
						top:-15,
						opacity:1
					});
				});
				$('.node-drag-wrapper').on('mouseleave', function(){
					$('.node-drag-wrapper').css({
						'border-color':'transparent'
					});
					$('.node-drag-item-wrapper').css({
						'border-color':'transparent'
					});
					$('span.node-drag-text-wrapper').css({
						'display':'none'
					});
					$('.node-settings-wrapper').animate({
						bottom:-21,
						opacity:0
					});

					$('.node-circle-settings-wrapper').animate({
						bottom:-21,
						opacity:0
					});

					$('.node-dragtopoint-wrapper').animate({
						top:-28,
						opacity:0
					});

					$('.node-circle-dragtopoint-wrapper').animate({
						top:-28,
						opacity:0
					});
				});

			
		});
		</script>
	</head>
	<body>
		<div id="wrapper">
			
			<br/><br/><br/><br/><br/><br/><br/><br/><br/>

			<!-- WORKFLOW -->
				<div class="node-drag-wrapper add-padding-node-workflow">
					<div class="node-drag-item-wrapper">
						<span class="node-drag-text-wrapper"> Drag here to move item</span>
					</div>
					<div class="node-pathpoint-div" style="border: 2px solid red;">
						<div class="node-drag-holder">
								<div class="node-workflow-icon-wrapper"><img src="workflow-processor-icon.jpg"></div>
							<div class="node-firstoption-wrapper">		
								<div class="node-settings-wrapper"></div>
							</div>		
							<div class="node-wrapper">
								<div class="node-content-wrapper">
									<div class="node-content-wrapper">ff
										<div class="node-dept-wrapper">
											Processor
										</div>
										<div class="node-name-wrapper">
											Status
										</div>
									</div>
								
								</div>
							</div>
							<div class="node-firstoption-wrapper">
								<div class="node-dragtopoint-wrapper"><span class="dragtext"> Drag here to connect</span></div>
							</div>
						</div>

					</div>
				</div>
			<!-- WORKFLOW -->


		</div>
	</body>	
</html>